<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input
          v-model="query.blurry"
          clearable
          size="small"
          placeholder="输入公告名称或内容搜索"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <date-range-picker v-model="query.createTime" class="date-item" unlink-panels />
        <el-select
          v-model="query.enabled"
          clearable
          size="small"
          placeholder="状态"
          class="filter-item"
          style="width: 90px"
          @change="crud.toQuery"
        >
          <el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
        </el-select>
        <rrOperation />
      </div>
      <crudOperation :permission="permission" />
    </div>
    <el-table
      ref="table"
      v-loading="crud.loading"
      lazy
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      :data="crud.data"
      row-key="id"
      @select="crud.selectChange"
      @select-all="crud.selectAllChange"
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="名称">
        <template slot-scope="scope">
          <div>
            <el-badge v-if="scope.row.isTop" value="置顶" class="item">
              <a
                :href="'/share-notice?id=' + scope.row.id+'&pid='+$store.state.user.user.id"
                target="_blank"
                style="color: #3A71A8"
                v-text="scope.row.title"
              /></el-badge>
            <a
              v-else
              :href="'/share-notice?id=' + scope.row.id+'&pid='+$store.state.user.user.id"
              target="_blank"
              style="color: #3A71A8"
              v-text="scope.row.title"
            />
            <el-button type="text" size="mini" icon="el-icon-document-copy" @click="copyToClipBoard(scope.row.id)" />
          </div>
        </template>
      </el-table-column>

      <el-table-column label="状态" width="100" align="center" prop="enabled">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.enabled"
            active-color="#409EFF"
            inactive-color="#F56C6C"
            @change="changeEnabled(scope.row, scope.row.enabled,)"
          />
        </template>
      </el-table-column>
      <el-table-column label="置顶" width="100" align="center" prop="isTop">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isTop"
            active-color="#409EFF"
            inactive-color="#F56C6C"
            @change="changeTop(scope.row, scope.row.isTop)"
          />
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建日期" />
      <el-table-column
        v-if="checkPer(['admin','notice:edit','notice:del'])"
        label="操作"
        width="130px"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <udOperation
            :data="scope.row"
            :permission="permission"
            msg="确定删除吗，此操作不能撤销！"
          />
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination />
  </div>
</template>

<script>
import crudNotice from '@/api/system/notice'
import CRUD, { crud, form, header, presenter } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import DateRangePicker from '@/components/DateRangePicker'
import pagination from '@crud/Pagination'
import { mapGetters } from 'vuex'
const defaultForm = { id: null, name: null, isTop: '1', subCount: 0, pid: null, deptSort: 999, enabled: 'true' }
export default {
  name: 'Notice',
  components: { crudOperation, rrOperation, udOperation, DateRangePicker, pagination },
  cruds() {
    return CRUD({ title: '公告', url: 'api/notice', crudMethod: { ...crudNotice }})
  },
  dicts: ['article_status', 'top_status'],
  mixins: [presenter(), header(), form(defaultForm), crud()],
  data() {
    return {
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        deptSort: [
          { required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
        ]
      },
      permission: {
        add: ['admin', 'notice:add'],
        edit: ['admin', 'notice:edit'],
        del: ['admin', 'notice:del']
      },
      enabledTypeOptions: [
        { key: 'true', display_name: '正常' },
        { key: 'false', display_name: '禁用' }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'baseApi'
    ])
  },
  methods: {
    // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {
      form.enabled = `${form.enabled}`
    },
    // 新增编辑前做的操作
    [CRUD.HOOK.beforeToCU](crud, form) {
      if (form.id) {
        this.$router.push('/notice/detail?id=' + form.id)
      } else {
        this.$router.push('/notice/detail')
      }
    },
    copyToClipBoard(id) {
      navigator.clipboard.writeText(this.baseApi + 'share-notice?id=' + id)
        .then(() => {
          this.$message.success('公告链接已复制到剪切板')
        })
    },
    // 改变状态
    changeEnabled(data, val) {
      this.$confirm('此操作将 ' + this.dict.label.article_status[val] + ' 《' + data.title + '》公告, 是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        crudNotice.edit(data).then(res => {
          this.crud.notify(this.dict.label.article_status[val] + '成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
        }).catch(err => {
          data.enabled = !data.enabled
          console.log(err.response.data.message)
        })
      }).catch(() => {
        data.enabled = !data.enabled
      })
    },
    // 改变状态
    changeTop(data, val) {
      this.$confirm('此操作将 "' + this.dict.label.top_status[val] + '" ' + data.title + '公告, 是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        crudNotice.edit(data).then(res => {
          this.crud.notify(this.dict.label.top_status[val] + '成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
        }).catch(err => {
          data.isTop = !data.isTop
          console.log(err.response.data.message)
        })
      }).catch(() => {
        data.isTop = !data.isTop
      })
    }

  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .vue-treeselect__control, ::v-deep .vue-treeselect__placeholder, ::v-deep .vue-treeselect__single-value {
  height: 30px;
  line-height: 30px;
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}
</style>
